<template>
  <div id="nav"> 
    <el-button class="nav_bt" type="default" size="mini" @click="open"
      ><span class="el-icon-s-unfold"></span
    ></el-button>
    <el-drawer
      :withHeader="false"
      v-model="drawer"
      direction="ltr"
      size="70%"
    >
      <Mdrawer @closedraw="close()"/>
    </el-drawer>
    <transition name="fold-left">
    <router-view></router-view>
    </transition>
  </div>
</template>
<script lang="ts">
import { ref ,Ref, watch} from "vue";
import Mdrawer from './components/mdrawer.vue';
import { useRouter } from 'vue-router';
export default {
  name: "App",
  components:{
     Mdrawer
  },
  beforeCreate(){
    const html:HTMLElement = document.getElementsByTagName('html')[0];
    html.style.fontSize = (window.screen.width/750)*100+'px';
  },
  setup() {
    const drawer:Ref<boolean> = ref(false);
    const open = function(): void {
      drawer.value = true;
    }
    const close = function():void{
      drawer.value = false;
    }
   
    return {
      drawer,
      open,
      close
    }
  },
}
</script>
<style lang="scss">
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body{
    overflow: auto;
    background-color:  rgb(232, 232, 238);
  }
  #nav{
    font-size: 0.27rem;
    .nav_bt{
      position: fixed;
      top: 0.1rem;
      z-index: 111;
      left: 0.1rem;
    }
  }
  .fold-left-enter-active {
    animation-name: fold-left-in;
    animation-duration: .5s;
  }
  .fold-left-leave-active {
    animation-name: fold-left-out;
    animation-duration: .5s;
  }
@keyframes fold-left-in {
    0% {
      opacity:0;
      transform: scale(0.8);
    }
    100% {
      opacity:1;
      transform: scale(1);
    }
  }
  @keyframes fold-left-out {
     0% {
      opacity:1;
      transform: scale(1);
    }
    100% {
      opacity:0;
      transform: scale(0.8);
    }
  }
</style>
